<template>
  <div class="app_card mt-3  pt-2  pb-5">
    <el-table v-loading="loading" element-loading-text="查询中..." stripe size="large" :data="dataOfTable"
      height="calc(100vh - 300px)">
      <el-table-column prop="name" label="教室" width="120" />
      <el-table-column prop="status" label="使用状态" width="100">
        <template #default="scope">
          <!--
            包含两种。online为0的连接故障和status小于0的其他故障。
            inUse 表示上下课，online表示教室是否课用。
            故障和报修没有关系，故障状态Status，小于0就是设备出现故障，online是判断设备是否在线，0是不在，1是在
             -->
          <template v-if="scope.row.status < 0">
            <img src="@/assets/img/bug.svg" width="16" class="v-sub">
            <font color="#FFBB00">故障</font>
          </template>
          <template v-else>
            {{ scope.row.inUse == '1' ? '上课' : '下课' }}
          </template>
        </template>
      </el-table-column>
      <el-table-column align='center' v-for="(item, index) in equipmentsList" :key="index" :label="item.label"
        minWidth="90">
        <template #default="scope">
          <el-switch size="large" disabled v-model="scope.row[item.prop]" inline-prompt active-value="1"
            inactive-value="0" active-text="开" inactive-text="关" />
        </template>
      </el-table-column>
      <el-table-column label="温湿度" minWidth="130" align='center'>
        <template #default="scope">
          {{ scope.row.temperature }}℃ <span class="mx-1">|</span>{{ scope.row.humidity }}%
        </template>
      </el-table-column>
      <el-table-column label="PM25" minWidth="100">
        <template #default="scope">
          {{ scope.row.pm25 }}μg
        </template>
      </el-table-column>
      <el-table-column label="CO2" minWidth="100">
        <template #default="scope">
          {{ scope.row.co2 }}
        </template>
      </el-table-column>
      <el-table-column label="当天能耗" minWidth="100">
        <template #default="scope">
          <font color="#FF8800">{{ scope.row.energy }}kws</font>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="教室管理" width="120" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="onLink(scope.row)">跳转</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-2">
      <el-pagination background v-model:currentPage="queryParam.page" v-model:page-size="queryParam.limit"
        :page-sizes="paginationOption.pageSizes" :background="false" :layout="paginationOption.layout"
        :total="paginationOption.totalCount" @size-change="handleChangeSize" @current-change="handleChangeCurrent" />
    </div>
  </div>
</template>

<script setup>
/**
 * 物联控制
 */
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { getNewObj } from '@/utils/EsCommon';


// ======================================================
//                      变量声明
// ======================================================

const emit = defineEmits(['goRoom']);

// 组件引用

// 表格数据
const loading = ref(false);
const dataOfTable = ref([]);
// 表格查询参数
const queryForm = ref({
  buildingId: "",
  radio_floor: "",
})

// 表格查询参数
const queryParam = ref({
  sort: "Id",
  order: "desc",
  page: 1,
  limit: 12,
})

// 表格多选数据
const multipleSelection = ref([]);

// 点击行内编辑按钮
const onLink = (row) => {
  emit('goRoom', row)
}

// ======================================================
//                      处理事件
// ======================================================

// 处理表格全选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const equipmentsList = ref([
  { prop: "equipmentType1", type: '1', label: "灯泡", value: '0' },
  { prop: "equipmentType2", type: '2', label: "空调", value: '0' },
  { prop: "equipmentType3", type: '3', label: "窗帘", value: '0' },
  // { prop: "equipmentType4", type: '5', label: "投影", value: '0' },
  // { prop: "equipmentType6", type: '6', label: "一体机", value: '0' },
  // { prop: "equipmentType9", type: '9', label: "功放开关", value: '0' },
  // { prop: "equipmentType15", type: '15', label: "门锁", value: '0' },
]);

// ======================================================
//                      处理事件
// ======================================================

const onRefresh = (query) => {
  let { buildingId = "", radio_floor = "" } = query
  if (buildingId) {
    queryForm.value.buildingId = buildingId
  }
  if (radio_floor) {
    queryForm.value.radio_floor = radio_floor
  }
  roomFetch();
}
const roomFetch = () => {
  multipleSelection.value = []
  queryParam.value.page = 1;
  paginationOption.value.totalCount = 0
  loadData()
}

// 分页栏配置数据
const paginationOption = ref({
  layout: 'total, sizes, prev, pager, next, jumper',
  pageSizes: [12, 24, 36, 48, 60, 72, 84, 96],
  totalCount: 0,
})


// 处理分页尺寸
const handleChangeSize = (val) => {
  queryParam.value.page = 1;
  queryParam.value.limit = val;
  loadData()
}

// 处理页码
const handleChangeCurrent = (val) => {
  queryParam.value.page = val;
  loadData()
}

const loadData = () => {
  dataOfTable.value = []
  let _queryParam = queryParam.value
  _queryParam.query = ''

  if (queryForm.value.buildingId) {
    _queryParam.query = "buildingId=" + queryForm.value.buildingId;
  }
  _queryParam.offset = (_queryParam.page - 1) * _queryParam.limit || 0;
  loading.value = true
  let url = ApiUrls.roomSearch

  console.log('radio_floor====', queryForm.value.radio_floor)
  if (queryForm.value.radio_floor == '-2') {//上课中
    url = ApiUrls.roomInclass
  } else if (queryForm.value.radio_floor == '-3') {//故障
    url = ApiUrls.roomFault
  }
  EsAjax.post(url, _queryParam).then(res => {
    console.log('res===', res)
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.msg);
      return;
    }
    let { list, totalCount } = res.data.data
    if (list && list.length) {
      list.forEach(element => {
        element.isCheck = false
        // <!-- 1-灯光；2-空调；3-窗帘；4-投影仪；5-幕布；6-电脑一体机；7-录播主机；8-大屏；9-功放；10-六合一传感器；11-电流电压传感器；12-触摸屏；13-ip电话；14-电子班牌；15-门禁；16-学生摄像头；17-老师摄像头 -->
        element.equipmentType1 = '0'
        element.equipmentType2 = '0'
        element.equipmentType3 = '0'
        element.equipmentType4 = '0'
        element.equipmentType5 = '0'
        element.equipmentType6 = '0'
        element.equipmentType9 = '0'
        element.equipmentType15 = '0'


        console.log(element.equipments)
        if (element.equipments && element.equipments.length) {

          element.equipments.forEach(equi => {
            equipmentsList.value.forEach(_equi => {
              if (_equi.type == equi.type) {
                _equi.label = equi.equipmentName
                element[_equi.prop] = equi.status == '1' ? '1' : '0'
              }
            });
            console.log(equi.type, equi.equipmentName)
          });
        }


      });
    }
    dataOfTable.value = list;
    console.log(dataOfTable.value);
    paginationOption.value.totalCount = totalCount
  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    loading.value = false
  })
}


defineExpose({
  loadData,
  onRefresh
})
</script>
<style lang="less"></style>
  
